<!DOCTYPE html>
<html>
    <head>
        <title>Socket</title>


        <script src="{{ asset('js/jquery.js') }}"></script>
        <script src="{{ asset('js/apps.js') }}"></script>
        <script type="text/javascript">
            

$(document).ready(function() {
    
    try {
        if (!WebSocket) {
            console.log("no websocket support");
        } else {
            var socket = new WebSocket("ws://127.0.0.1:7778/"),
                realtimeApps = new RealtimeApps(socket);
                
            socket.addEventListener("open", function(e) {


                $("#yourId").html();


                $("#button").click(function() {
                    var param = "";
                    var fromId = $("#from").val(),
                            toId = $("#to").val(),
                            message = $("#message").val(),
                            type = $("#type").val();
                    switch (type) {
                        case "chat":
                            {
                                var data = {
                                    "message": message
                                }

                                param = new RequestData(fromId, toId, type, data);
                            }
                    }


                    socket.send(JSON.stringify(param));
                })

            });

            socket.addEventListener("error", function(e) {
                console.log("error: ", e);
            });

            socket.addEventListener("message", function(e) {
                console.log("message: ", e);
                //console.log("message: ", JSON.parse(e.data));
                var response = JSON.parse(e.data);
                if (response.type) {
                    var type = response.type;
                    switch (type) {
                        case "chat":
                            {
                                console.log(response.data);
                                var message = response.data;
                                $("#messages").append(message + "<br />")
                            }
                    }
                }

            });

            console.log("socket:", socket);

            window.socket = socket;

        }
    } catch (e) {
        console.log("exception: " + e);
    }
})

        </script>
    </head>
    <body>   
        <input placeholder="from" type="text" id="from" />
        <input placeholder="to" type="text" id="to" />
        <input type="text" id="message" />
        <select id="type">
            <option value="chat">Chat</option>
            <option value="message">Message</option>
            <option value="comment">Comment</option>
            <option value="like">Like</option>
            <option value="addFriend">Add friend</option>
        </select>
        <input type="submit" id="button" />
        <div>Your id: <span id="yourId"></span></div>
        <div id="messages">
        </div>
    </body>
</html>